<!--
Copyright 2016 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<style>
  div {
    margin: 0;
    padding: 0;
  }

  div[hidden] {
    display: none;
  }

  #box {
    display: block;
    overflow: auto;
    padding-top: 16px;
    width: 320px;
  }

  .category {
    color: var(--cros-text-color-primary);
    font-family: 'Roboto Medium';
    font-size: 14px;
    line-height: 56px;
    margin-inline-start: 32px;
  }

  hr {
    border-color: var(--cros-separator-color);
    border-top-width: 1px !important;
    border-width: 0;
    margin-bottom: 8px;
    margin-top: 16px;
  }

  @media only screen and (max-width: 720px) {
    #box {
      width: 240px;
    }
    .category {
      margin: 12px 12px;
    }
  }
</style>
<div id="box">
  <div class="category">$i18n{METADATA_BOX_GENERAL_INFO}</div>
  <files-metadata-entry key="$i18n{METADATA_BOX_FILE_SIZE}" value="[[size]]" loading="[[isSizeLoading]]"></files-metadata-entry>
  <files-metadata-entry key="$i18n{METADATA_BOX_MODIFICATION_TIME}" value="[[modificationTime]]"></files-metadata-entry>
  <files-metadata-entry key="$i18n{METADATA_BOX_MEDIA_MIME_TYPE}" value="[[mediaMimeType]]"></files-metadata-entry>
  <files-metadata-entry key="$i18n{METADATA_BOX_FILE_LOCATION}" value="[[fileLocation]]" hidden="[[!isTrashEntry(originalLocation)]]"></files-metadata-entry>
  <files-metadata-entry key="$i18n{METADATA_BOX_ORIGINAL_LOCATION}" value="[[originalLocation]]" hidden="[[isTrashEntry(originalLocation)]]"></files-metadata-entry>

  <div hidden="[[!hasFileSpecificMetadata_]]">
    <hr>
    <div class="category" hidden="[[!isImage_(type)]]">$i18n{METADATA_BOX_IMAGE_INFO}</div>
    <div class="category" hidden="[[!isAudio_(type)]]">$i18n{METADATA_BOX_AUDIO_INFO}</div>
    <div class="category" hidden="[[!isVideo_(type)]]">$i18n{METADATA_BOX_VIDEO_INFO}</div>
    <files-metadata-entry key="$i18n{METADATA_BOX_DIMENSION}" value="[[dimension_(imageWidth, imageHeight)]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_ALBUM_TITLE}" value="[[mediaAlbum]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_MEDIA_TITLE}" value="[[mediaTitle]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_MEDIA_ARTIST}" value="[[mediaArtist]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_DURATION}" value="[[time2string_(mediaDuration)]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_GENRE}" value="[[mediaGenre]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_TRACK}" value="[[mediaTrack]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_EXIF_DEVICE_MODEL}" value="[[deviceModel_(ifd)]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_EXIF_DEVICE_SETTINGS}" value="[[deviceSettings_(ifd)]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_EXIF_GEOGRAPHY}" value="[[geography_(ifd)]]"></files-metadata-entry>
    <files-metadata-entry key="$i18n{METADATA_BOX_YEAR_RECORDED}" value="[[mediaYearRecorded]]"></files-metadata-entry>
  </div>
</div>
